<template>
  <div class="picker border-b">
    <div class="field_wrap">
      <label>
        {{label}}
      </label>
      <div class="field_ipt"
           @click="handleShow">
        <p class="field_val"></p>
        <input class="field_val"
               type="text"
               ref="ipt"
               disabled
               :class="{'is_val':iptValue}"
               :placeholder="placeholder"
               v-model="iptValue">
      </div>
      <div class="svg-wrap"
           :style="{transform:show?'rotate(-180deg)':''}">
        <svg-icon name="arrow_down"
                  :color="disabled ? 'rgba(33, 40, 44, 0.2)':'rgba(33, 40, 44, 0.8)'"></svg-icon>
      </div>
    </div>
    <van-popup v-model="show"
               position="bottom">
      <van-picker :item-height="pickerHeight"
                  show-toolbar
                  ref="picker"
                  :value-key="valueKey"
                  :rules="rules"
                  :columns="columns"
                  @cancel="onCancel"
                  @confirm="onConfirm" />
    </van-popup>
  </div>
</template>
<script>
import { Popup, Picker } from 'vant'
import areas from './area'

export default {
  name: 'picker',
  components: {
    [Popup.name]: Popup,
    [Picker.name]: Picker
  },
  props: {
    label: String,
    required: Boolean,
    // 是否禁用
    disabled: Boolean,
    placeholder: String,
    column: {
      type: Number,
      default: 1
    },
    value: {
      type: [String, Number],
      required: true
    },
    options: [Array, Object],
    type: String,
    valueKey: {
      type: String,
      default: 'label'
    },
    rules: Array
  },
  data () {
    return {
      show: false,
      iptValue: '',
      isInit: false
    }
  },
  computed: {
    columns () {
      if (this.options) return this.options
      return areas
    },
    pickerHeight () {
      let height = 44
      // height = height * window.devicePixelRatio
      return height
    },
    picker () {
      return this.$refs.picker
    }
  },
  watch: {
    value: {
      handler (val) {
        this.iptValue = val
      },
      immediate: true
    },
    iptValue (val, oVal) {
      this.$emit('input', val)
    }
  },
  methods: {
    init () {
      if (!this.picker) return
      this.isInit = true
      let cols = this.iptValue.split(' ')
      switch (cols.length) {
        case 1:
          this.picker.setColumnValue(0, cols[0])
          break
        case 2:
          this.picker.setValues(cols)
          let ind = this.picker.getColumnIndex(0)
          this.picker.setColumnValues(1, this.columns[ind].children)
          this.picker.setColumnValue(1, cols[1])
      }
    },
    handleShow () {
      if (this.disabled) return
      this.show = !this.show
      if (this.isInit) return
      this.$nextTick(() => {
        this.init()
      })
    },
    onCancel (item) {
      this.show = false
      this.init()
    },
    onConfirm (item) {
      this.show = false
      let cols = typeof item === 'object' ? item : [item]
      this.iptValue = cols.join(' ')
    }
  }
}
</script>
<style lang="stylus" scoped>
.picker
  margin-bottom 15px
  .field_wrap
    flexAlign()
    padding 10px 15px
    border 1PX solid $color-bd
    border-radius 4px
    background-color $color-ipt-bg
  label
    display block
    color $color-font-l
    font-size 16px
    line-height 22px
  .field_ipt
    position relative
    flex 1
    width 0
    line-height 22px
    input
      font-size 16px
    .field_val:disabled
      // color $color-font-hl
      opacity 1
      // -webkit-text-fill-color $color-font
      -webkit-opacity 1
    .is_val:disabled
      -webkit-text-fill-color $color-font
  .svg-wrap
    margin-left 5px
    font-size 14px
    transition all 0.3s
</style>
